<template>
  <div class="container">
    <el-tabs v-model="data.activePage" class="demo-tabs">
      <el-tab-pane label="研发平台管理" name="one"></el-tab-pane>
    </el-tabs>
    <el-row class="">
      <el-col :span="3"><span class="pageName">高端研发平台(基地)</span></el-col>
      <el-col :span="14">
        承建单位:
        <SelectOption :options="data.options" :placeholder="'承建单位'" @change-value="changeValue"> </SelectOption>
        <el-input v-model="data.params.plaUnit" placeholder="平台（基地）名称" style="width: 150px; margin-right: 15px" />
        <SelectOption :options="data.levelOptions" :placeholder="'平台级别'" @change-value="changeValue1"> </SelectOption>
        <SelectOption :options="data.typeOptions" :placeholder="'专业类别'" @change-value="changeValue2"> </SelectOption>
        <el-button class="ordinary" @click="search()">搜索</el-button>
      </el-col>
      <el-col :span="7" align="right">
        <el-button class="unlock">解锁</el-button>
        <el-button class="lock">锁定</el-button>
        <el-button class="ordinary">批量导出</el-button>
        <el-button type="danger" @click="handleDetect()">批量删除</el-button>
        <el-button type="primary" @click="handleAdd()">新增</el-button>
      </el-col>
    </el-row>

    <div>
      <Table :tableArr="data.allTableData" :pagination="data.page" :columns="data.columns" @delectTable="delectIds">
        <template #operate="{ row }">
          <el-button size="small" class="ordinary" @click="handleEdit(row)">编辑</el-button>
          <el-button v-if="row.status == 0" size="small" type="primary" @click="handleConfirm(row)">确认</el-button>
        </template>
      </Table>
    </div>

    <el-dialog v-model="data.dialogVisible" width="60%" top="10vh" :show-close="false" :close-on-click-modal="false">
      <template #title>
        <div class="my-header">
          <el-tabs v-model="data.activeName" class="demo-tabs">
            <el-tab-pane label="基本信息" name="first">
              <Information></Information>
            </el-tab-pane>
            <el-tab-pane label="平台成员" name="second">
              <Members :members="data.members" @dataChange="dataChange"></Members>
            </el-tab-pane>
            <el-tab-pane label="平台项目" name="third">
              <Association :projects="data.projects" @dataChange="dataChange"></Association>
            </el-tab-pane>
            <el-tab-pane label="相关附件" name="fourth">
              <platformFiles :files="data.files" @dataChange="dataChange"></platformFiles>
            </el-tab-pane>
            <el-tab-pane label="变更记录" name="five" v-if="data.recordShow">
              <record :changeLogs="data.changeLogs"></record>
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="
            data.dialogVisible = false;
          data.recordShow = false
            ">关闭</el-button>
          <el-button type="primary" @click="handleSave()">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { ref, reactive, computed } from 'vue'
import tableData from './tableHeader.json'
import SelectOption from '@/views/science/components/selectOption/index.vue'
import Table from '@/views/science/components/table/table.vue'
import Information from '@/views/science/construction/high-end-platform/information.vue'
import Members from '@/views/science/components/members/members.vue'
import Association from '@/views/science/components/association/association.vue'
import platformFiles from '@/views/science/components/platformFiles/platformFiles.vue'
import record from '@/views/science/components/record/record.vue'
import { getList, getDetail, getDelect, getAdd } from '../api/hignEnd'
import { useStore } from 'vuex'
export default {
  components: {
    SelectOption,
    Table,
    Information,
    Members,
    Association,
    platformFiles,
    record,
  },
  setup() {
    const store = useStore()
    let data = reactive({
      activePage: ref('one'),
      activeName: ref('first'),
      unit: [],
      dialogVisible: false,
      recordShow: false,
      loading: false,
      page: { page: 1, limit: 10, total: 4 },
      params: {
        conUnit: '1',
        current: 1,
        level: '1',
        plaUnit: '',
        proLevel: '1',
        size: 10,
      },
      selectedRows: [],
      columns: tableData.platformTableHeader,
      ids: [],
      allTableData: [
        {
          "id": "1",
          "abbreviation": "1",
          "level": "1",
          "type": "1",
          "way": "1",
          "rdDept": "1",
          "headBy": "1",
          "phone": "1",
          "status": '0',
        },
        {
          "id": "ed0a6f2f23bf45c9841d629b672238aa",
          "abbreviation": "平台简称",
          "level": "1",
          "type": "1",
          "way": "1",
          "rdDept": "64d9a5658cf1454185dd3551c1aaf62f",
          "headBy": "负责人",
          "phone": "14209834339",
          "status": '1',
        }
      ],
      options: computed(() => store.state.technologyStrength.unitSelet),
      levelOptions: computed(() => store.state.technologyStrength.levelSelect),
      typeOptions: computed(() => store.state.technologyStrength.typeSelect),
      members: [
        {
          "id": "1",
          "memberId": "3",
          "memberName": "张三",
          "delFlag": "0",
          "createUsername": '',
          "createBy": '',
          "modifyUsername": '',
          "modifyBy": '',
          "modifyTime": "2023-07-30 00:12:52",
          "proleId": "1",
          "pid": "ed0a6f2f23bf45c9841d629b672238aa",
          "prole": "主任",
          "ptype": 1,
        }
      ],
      projects: [
        {
          "id": "1",
          "projectId": "3",
          "projectName": "项目1",
          "delFlag": "0",
          "createUsername": '',
          "createBy": '',
          "modifyUsername": '',
          "modifyBy": '',
          "modifyTime": "2023-07-30 00:29:21",
          "pid": "ed0a6f2f23bf45c9841d629b672238aa",
          "ptype": 1,
        }
      ],
      files: [
        {
          "id": 1685584191137403000,
          "filePath": "http://xxxx.com/a.png",
          "fileType": "png",
          "fileSize": "25535.0",
          "fileName": "张三.png",
          "delFlag": "0",
          "createUsername": '',
          "createBy": '',
          "modifyUsername": '',
          "modifyBy": '',
          "modifyTime": "2023-07-30 17:32:42",
          "pid": "ed0a6f2f23bf45c9841d629b672238aa",
          "ptype": 1,
        }
      ],
      changeLogs: [
        {
          "id": 1685623347108511700,
          "createUsername": '',
          "createBy": '',
          "updateVars": "平台简称建设方式",
          "updateBeforeContent": "平台简称建设方式",
          "updateAfterContent": "平台简称111建设方式222",
          "createTime": '',
          "pid": "ed0a6f2f23bf45c9841d629b672238aa",
          "ptype": 1,
        }
      ]
    })

    const changeValue = (item) => data.params.conUnit = item.id
    const changeValue1 = (item) => data.params.level = item.value
    const changeValue2 = (item) => data.params.proLevel = item.value

    //主页面表格初始化
    const tableList = async () => {
      let res = await getList(data.params)
      if (res.data.success) {
        let records = res.data.data
        records.records.map((item) => {
          console.log(item['status'])
        })
        // data.allTableData = res.data.data.records
        data.page.total = records.total
      }
    }

    //详情数据获取
    const detailData = async (id) => {
      let res = await getDetail(id)
      if (res.data.success) {
        store.commit('technologyStrength/getForm', { ...res.data.data.info })
        data.members = res.data.data.members
        data.projects = res.data.data.projects
        data.files = res.data.data.files
        data.changeLogs = res.data.data.changeLogs
      }
    }

    const dataChange = () => {
      detailData(store.state.technologyStrength.rowId)
    }

    // 点击查询按键，分页设置为当前页为1，
    const search = () => {
      data.page.page = 1
      console.log(data.params)
      tableList()
    }

    const delectIds = (ids) => {
      data.ids = ids
    }
    const handleDetect = async () => {
      let res = await getDelect(data.ids)
      if (res.data.success) {
        tableList()
      }
    }

    const handleAdd = async () => {
      data.dialogVisible = true
      store.commit('technologyStrength/emptyForm')

    }
    const handleEdit = (row) => {
      detailData(row.id)
      data.dialogVisible = true
      store.commit('technologyStrength/getRowId', row.id)
    }
    const handleConfirm = (row) => {
      detailData(row.id)
      store.commit('technologyStrength/getRowId', row.id)
      data.dialogVisible = true;
      data.recordShow = true
    }
    const handleSave = async () => {
      const a = store.state.technologyStrength.form
      let res = await getAdd(a)
      if (res.data.success) {
        console.log(res)
      }
    }

    tableList()

    return {
      data,
      store,

      changeValue,
      changeValue1,
      changeValue2,
      dataChange,

      delectIds,
      handleDetect,
      handleAdd,
      handleEdit,
      handleConfirm,
      search,
      handleSave,
    }
  },
}
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;
}
.pageName {
  font-weight: 700;
}

.el-form-item {
  .el-input {
    width: 100px;
  }

  .el-select {
    width: 100px;
  }
}

/deep/.demo-tabs>.el-tabs__content {
  max-height: 500px;
  overflow-y: scroll;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
}

/deep/.demo-tabs>.el-tabs__content::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}
</style>
